<template>
  <div class="search">
    <el-autocomplete
      :fetch-suggestions="querySearch"
      @select="handleSelect"
      :trigger-on-focus="false"
      v-model="hostname"
      class="inline-input form-input"
      placeholder="请输入医院名称" />
    <el-button type="primary" :icon="Search" @click="getHospitalInfo">搜索</el-button>
  </div>
</template>
<script setup lang="ts">
// 引入图标
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 引入接口
import { reqHospitalInfo } from '@/api/home'
let hostname = ref('')
let $router = useRouter()
// 获取医院信息
const querySearch = async (queryString: string, cb: any) => {
  console.log(queryString)
  const { data } = await reqHospitalInfo(hostname.value)
  cb(
    data.map((item) => {
      return {
        value: item.hosname,
        hoscode: item.hoscode
      }
    })
  )
}
const getHospitalInfo = async () => {}
// 点击某一个推荐项
const handleSelect = (item: any) => {
  $router.push('/hospital/register?hoscode=' + item.hoscode)
}
</script>
<script lang="ts">
export default {
  name: 'search'
}
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 30px auto;
  :deep(.el-input__wrapper) {
    height: 36px;
    line-height: 36px;
  }
  .el-button {
    height: 36px;
    margin-left: 10px;
  }
}
</style>
